<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改</title>
</head>
<script src="/js/global.js"></script>
<link rel="stylesheet" href="/css/font.css" type="text/css"/>
<link rel="stylesheet" href="/css/layui.css" type="text/css"/>
<link rel="stylesheet" href="/css/xadmin.css" type="text/css"/>
<script type="text/javascript" src="/js/layui.js" ></script>
<script type="text/javascript" src="/js/xadmin.js" ></script>
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<body>

<div class="layui-form" style="margin-top: 15px;">

    <div class="layui-form-item" style="width: 80%;display: none">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input type="text" name="id" id="id" lay-verify="required" placeholder="ID"
                   autocomplete="off" class="layui-input" disabled>
            <input type="text" name="typeides" id="typeides" />
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" id="title" lay-verify="required" placeholder="名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <select name="typeid" id="typeid" lay-verify="" lay-search="">
                <option value="0">请选择类型</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
                <i class="layui-icon layui-icon-upload"></i>
                <div>点击上传，或将文件拖拽到此处</div>
                <div id="ID-upload-demo-preview">
                    <hr>
                    <img src="" id="imgs" alt="上传成功后渲染" style="max-width: 100%;height: 100px;">
                </div>
            </div>
            <input type="text" name="img" id="img" style="display: none">
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input type="number" name="price" id="price" placeholder="价格" autocomplete="off" lay-verify="required"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-block">
            <input type="number" name="stock" id="stock" placeholder="库存" autocomplete="off" lay-verify="required"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="describe" placeholder="描述" class="layui-textarea" id="describe" cols="100" rows="5"></textarea>
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%; text-align: center;">
        <button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
    </div>

</div>
<script type="text/javascript">
    layui.use(['laydate', 'form', 'upload'], function() {
        var laydate = layui.laydate,
            form = layui.form,
            upload = layui.upload,
            $ = layui.jquery;

        upload.render({
            elem: '#ID-upload-demo-drag',
            url: '../upload/img', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                layer.load();
            },
            done: function (res) {
                layer.closeAll('loading');
                if (res.code===200){
                    layer.msg('上传成功');
                    $('#ID-upload-demo-preview').removeClass('layui-hide')
                        .find('img').attr('src', res.msg);
                    $("#img").val(res.msg);
                }else{
                    layer.msg(res.msg);
                }
            },
            error: function(){
                layer.closeAll('loading');
                return layer.msg("网络繁忙，请稍后再试！！！");
            }
        });

        //查询所有分类
        $.get("../type/findAll", function (res) {
            if (res.code === 200) {
                let data = res.data;
                //循环遍历加入到下拉列表中typeid
                for (let i = 0; i < data.length; i++) {
                    let option = '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    $("#typeid").append(option);
                }
            }
            $("#typeid").val($("#typeides").val());
            form.render('select');
        })

        form.on('submit(formDemo)', function(data) {
            //判断价格是否是两位小数，是否大于等于0
            let price = data.field.price; // 获取价格
            if (price < 0) {
                layer.msg("价格必须大于等于0")
                return false;
            } else { // 使用正则表达式判断是否符合规则
                let regexPattern = /^\d+(\.\d{1,2})?$/;
                if (!regexPattern.test(price)) {
                    layer.msg("价格最多只能保留两位小数")
                    return false;
                }
            }
            let stock = data.field.stock; // 获取库存
            let regexPattern = /^[1-9]\d*$/; // 正整数的正则表达式
            if (!regexPattern.test(stock)) { // 判断数字是否符合正则表达式
                layer.msg("库存只能是正整数")
                return false;
            }
            if ($("#img").val() === ""){
                layer.msg("请上传图片")
                return false;
            }
            $.post("../goods/update", data.field, function(res) {
                if (res.code === 200) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 2000
                    }, function() {
                        var index = parent.layer.getFrameIndex(window
                            .name); //获取当前窗口的name
                        parent.layer.close(index); //关闭窗口
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000
                    });
                }
            })
        });
    })
</script>
</body>
</html>
